//COMMON IMPORTS
@import "../config/imports";

.custom-secondary-font {
	font-family: "Oswald", sans-serif;
}

.custom-box-shadow-1 {
    box-shadow: 0 15px 30px -15px rgba(0, 0, 0, 0.15);
}

/* Header */
@media(min-width: 992px) {
	#header {
		.header-nav-main {
			nav {
				> ul {
					&:not(:hover) {
						> li {
							> a {
								&.active {
									color: #FFF !important;
									&:before {
										background: #FFF !important;
									}
								}
							}
						}
					}
					> li {
						&:hover {
							> a {
								color: #FFF !important;
								&:before {
									background: #FFF !important;
								}
							}
						}
					}
				}
			}
		}
	}

	html.sticky-header-active {
		#header {
			.header-nav-main {
				nav {
					> ul {
						&:not(:hover) {
							> li {
								> a {
									&.active {
										color: $color-dark !important;
										&:before {
											background: $color-dark  !important;
										}
									}
								}
							}
						}
						> li {
							> a {
								color: $color-dark !important;
							}
							&:hover {
								> a {
									color: $color-dark  !important;
									&:before {
										background: $color-dark  !important;
									}
								}
							}
						}
					}
				}
			}
		}
	}
}

/* Header Social Icons */
html.sticky-header-active {
	#header {
		.header-social-icons {
			> li {
				> a {
					&:hover {
						> i {
							color: #FFF !important;
						}
					}
					> i {
						color: $color-dark !important;
					}
				}
			}
		}
	}
}

/* Animated Circles */
.custom-animated-circles {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 500px;
	height: 500px;
	transform: translate3d(-55%, 25%, 0);
	.circle {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 50%;
		height: 50%;
		border-radius: 100%;
		border: 1px solid #FFF;
		transform: translate3d(-50%, -50%, 0);
		animation-name: customAnimatedCircles;
		animation-iteration-count: infinite;
	    animation-fill-mode: both;
	    animation-timing-function: linear;
	    animation-duration: 2.5s;
	    animation-delay: 500ms;
		&:nth-child(2) {
			width: 70%;
			height: 70%;
			animation-delay: 1000ms;
		}
		&:nth-child(3) {
			width: 90%;
			height: 90%;
			animation-delay: 1500ms;
		}
		&:nth-child(4) {
			width: 110%;
			height: 110%;
			animation-delay: 2000ms;
		}
	}

	&.custom-animated-circles-pos-2 {
		bottom: auto;
		top: 0;
		transform: translate3d(-55%, -25%, 0);
	}

	&.custom-animated-circles-pos-3 {
		bottom: auto;
		left: auto;
		right: 0;
		transform: translate3d(65%, -50%, 0);
		top: 0;
	}
}

@keyframes customAnimatedCircles {
	0% {
		opacity: 0;
		transform: translate3d(-50%, -50%, 0) scale(0.8);
	}

	50% {
	    opacity: 0.5;
	    transform: translate3d(-50%, -50%, 0);
	}

	100% {
		opacity: 0;
		transform: translate3d(-50%, -50%, 0) scale(1.1);
	}

}

/* Custom Screens */
.custom-screens-carousel {
	position: relative;
	z-index: 30;
	margin-top: -250px;
	@media(max-width: 991px) {
		margin-top: -90px;
	}
}

/* Carousel Ipad */
.carousel-ipad {
	border-radius: 35px;
	border: 1px solid #FFF;
	padding: 50px;
	@media(max-width: 991px) {
		padding: 25px;
		border-radius: 17px;
	}
	background: #F9F9F9;
	box-shadow: 0px 5px 50px rgba(0, 0, 0, 0.1);
	position: relative;
	img {
		border: 1px solid #FFF;
	}
	.carousel-ipad-camera {
		background: #3c3d3d;
		width: 8px;
		height: 8px;
		position: absolute;
		left: 0;
		margin-left: 20px;
		bottom: 50%;
		margin-bottom: -5px;
		border-radius: 100%;
	}
	.carousel-ipad-home {
		background: #F9F9F9;
		box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12);
		border-radius: 28px;
		width: 40px;
		height: 40px;
		position: absolute;
		right: 0;
		margin-right: 5px;
		bottom: 50%;
		margin-bottom: -20px;
		&:after {
			width: 15px;
			height: 15px;
			margin-top: -8px;
			margin-left: -8px;
			border: 1px solid rgba(0,0,0,0.12);
			border-radius: 4px;
			position: absolute;
			display: block;
			content: '';
			top: 50%;
			left: 50%;
		}
	}
	@media(max-width: 991px) {
		.carousel-ipad-camera, .carousel-ipad-home {
			display: none;
		}
	}
	&.carousel-ipad-sm {
		padding: 40px;
		@media(max-width: 991px) {
			padding: 20px;
			border-radius: 12px;
		}
		border-radius: 25px;
	}
}

/* Custom Form Style */
.custom-form-style-1 {
	.form-control {
		padding: 1.3rem;
    	height: 45px;
	}
}